<template>
  <el-dialog
    :title="{ add: '新增题库测试', edit: '编辑题库测试' }[mode]"
    :visible.sync="isShow"
    width="30%"
    fullscreen
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="500px">
      <el-form-item label="学科" prop="subject">
        <el-select v-model="form.subject" placeholder="请选择">
          <el-option label="前端" :value="97"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="阶段" prop="step">
        <el-select v-model="form.step" placeholder="请选择">
          <el-option label="初级" :value="1"></el-option>
          <el-option label="中级" :value="2"></el-option>
          <el-option label="高" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterprise">
        <el-select v-model="form.enterprise" placeholder="请选择">
          <el-option label="阿里巴巴" :value="51"></el-option>
          <el-option label="黑马程序员" :value="50"></el-option>
          <el-option label="传值教育" :value="49"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="城市" prop="city">
        <el-cascader
          v-model="form.city"
          :options="options"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="题型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="form.difficulty">
          <el-radio :label="1">简单</el-radio>
          <el-radio :label="2">一般</el-radio>
          <el-radio :label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <hr />
      <!-- 富文本 -->
      <el-form-item label="试题标题" prop="title">
        <div class="text">
          <quillEditor v-model="form.title"></quillEditor>
        </div>
      </el-form-item>
      <el-form-item label="单选" prop="single_select_answer">
        <el-radio-group v-model="form.single_select_answer">
          <el-radio :label="'A'">A</el-radio>
          <el-radio :label="'B'">B</el-radio>
          <el-radio :label="'C'">C</el-radio>
          <el-radio :label="'D'">D</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 富文本 -->
      <el-form-item label="答案解析" prop="answer_analyze">
        <div class="text">
          <quillEditor v-model="form.answer_analyze"></quillEditor>
        </div>
      </el-form-item>
      <el-form-item label="试题备注" prop="remark">
        <el-input style="width:820px" v-model="form.remark"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align:center">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { regionDataPlus } from 'element-china-area-data'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { questionAdd, questionEdit } from '../../../api/question'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      mode: 'add',
      isShow: false,
      form: {
        title: '',
        subject: '',
        step: '',
        enterprise: '',
        city: '',
        type: '',
        difficulty: '',
        single_select_answer: [],
        multiple_select_answer: [],
        short_answer: '',
        video: '',
        answer_analyze: '',
        remark: '',
        select_options: [
          { tabel: 'A' },
          { tabel: 'B' },
          { tabel: 'C' },
          { tabel: 'D' }
        ]
      },
      options: regionDataPlus,
      rules: {
        step: [{ required: true, message: '必填', trigger: 'change' }],
        subject: [{ required: true, message: '必填', trigger: 'change' }],
        enterprise: [{ required: true, message: '必填', trigger: 'change' }],
        city: [{ required: true, message: '必填', trigger: 'change' }],
        type: [{ required: true, message: '必填', trigger: 'change' }],
        difficulty: [{ required: true, message: '必填', trigger: 'change' }],
        title: [{ required: true, message: '必填', trigger: 'change' }],
        single_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        answer_analyze: [
          { required: true, message: '必填', trigger: 'change' }
        ],
        remark: [{ required: true, message: '必填', trigger: 'change' }]
      }
    }
  },
  methods: {
    handleChange (value) {},
    async getDate () {},
    async submit () {
      this.$refs.form.validate(async res => {
        if (res) {
          console.log(this.form.difficulty)
          if (this.mode === 'add') {
            await questionAdd(this.form)
            this.$message.success('添加成功')
            this.isShow = false
          } else if (this.mode === 'edit') {
            console.log(this.form.type)
            // if (this.form.step === 0) {
            //   this.form.step = `${this.form.subject_name}.简单`
            // } else if (this.form.step === 1) {
            //   this.form.step = `${this.form.subject_name}.一般`
            // } else if (this.form.step === 2) {
            //   this.form.step = `${this.form.subject_name}.困难`
            // }
            // if (this.form.type === 0) {
            //   this.form.type = '简单'
            // } else if (this.form.type === 1) {
            //   this.form.type = '一般'
            // } else if (this.form.type === 2) {
            //   this.form.type = '困难'
            // }
            // if (this.form.status) {
            //   this.form.status = '启用'
            // } else {
            //   this.form.status = '禁用'
            // }
            console.log(this.form)
            const res = await questionEdit(this.form)
            this.$message.success('修改成功')
            this.$emit('getDate')
            console.log(res)
            this.isShow = false
          }
        } else {
          this.$message.error('验证失败')
          return false
        }
      })
    }
  },
  created () {}
}
</script>

<style lang="less" scopen>
.chengshi {
  position: absolute;
  left: 481px;
  top: 290px;
}
.text {
  width: 800px;
  height: 300px;
  margin: 0 auto;
  margin-right: 330px;
}
</style>
